<html>

<head>
  <title>nsIAccessibleSelectable ARIA widgets testing</title>

  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  </style>

  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../role.js"></script>
  <script type="application/javascript"
          src="../states.js"></script>
  <script type="application/javascript"
          src="../selectable.js"></script>

  <script type="application/javascript">
    function testSelectable(aID, aSelectableChildren)
    {
      var acc = getAccessible(aID, [nsIAccessibleSelectable]);

      testSelectableSelection(acc, []);

      acc.selectAll();
      testSelectableSelection(acc, aSelectableChildren);

      acc.unselectAll();
      testSelectableSelection(acc, []);
    }

    function doTest()
    {
      //////////////////////////////////////////////////////////////////////////
      // role="tablist"

      id = "tablist";
      ok(isAccessible(id, [nsIAccessibleSelectable]),
         "No selectable accessible for " + id);

      testSelectableSelection(id, [ ]);

      //////////////////////////////////////////////////////////////////////////
      // role="listbox"

      id = "listbox1";
      ok(isAccessible(id, [nsIAccessibleSelectable]),
         "No selectable accessible for " + id);

      testSelectableSelection(id, [ ]);

      //////////////////////////////////////////////////////////////////////////
      // role="listbox" aria-multiselectable

      id = "listbox2";
      ok(isAccessible(id, [nsIAccessibleSelectable]),
         "No selectable accessible for " + id);

      testSelectableSelection(id, [ ]);

      select = getAccessible(id, [nsIAccessibleSelectable]);
      select.addItemToSelection(0);
      testSelectableSelection(id, [ "listbox2_item1" ]);
      select.removeItemFromSelection(0);
      testSelectableSelection(id, [ ]);
      select.selectAll();
      testSelectableSelection(id, [ "listbox2_item1", "listbox2_item2" ]);
      select.unselectAll();
      testSelectableSelection(id, [ ]);
      
      //////////////////////////////////////////////////////////////////////////
      // role="grid"

      id = "grid1";
      ok(isAccessible(id, [nsIAccessibleSelectable]),
         "No selectable accessible for " + id);

      testSelectableSelection(id, [ ]);

      //////////////////////////////////////////////////////////////////////////
      // role="tree"

      id = "tree1";
      ok(isAccessible(id, [nsIAccessibleSelectable]),
         "No selectable accessible for " + id);

      testSelectableSelection(id, [ ]);

      //////////////////////////////////////////////////////////////////////////
      // role="treegrid"

      id = "treegrid1";
      ok(isAccessible(id, [nsIAccessibleSelectable]),
         "No selectable accessible for " + id);

      testSelectableSelection(id, [ ]);

      //////////////////////////////////////////////////////////////////////////
      // role="grid" aria-multiselectable, selectable children in subtree

      id = "grid2";
      ok(isAccessible(id, [nsIAccessibleSelectable]),
         "No selectable accessible for " + id);

      testSelectable(id,
                     ["grid2_colhead1", "grid2_colhead2", "grid2_colhead3",
                      "grid2_rowhead", "grid2_cell1", "grid2_cell2"]);

      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>

</head>

<body>

  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=530014"
     title="ARIA single selectable widget should implement nsIAccessibleSelectable">
    Mozilla Bug 530014
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=566551"
     title="ARIA grid and accessible selectable methods shouldn't use GetNextSibling">
    Mozilla Bug 566551
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=590176"
     title="add pseudo SelectAccessible interface">
    Mozilla Bug 590176
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=804040"
     title="Selection event not fired when selection of ARIA tab changes">
    Mozilla Bug 804040
  </a>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <div role="tablist" id="tablist">
    <div role="tab">tab1</div>
    <div role="tab">tab2</div>
  </div>

  <div role="listbox" id="listbox1">
    <div role="option">item1</div>
    <div role="option">item2</div>
  </div>

  <div role="listbox" id="listbox2" aria-multiselectable="true">
    <div role="option" id="listbox2_item1">item1</div>
    <div role="option" id="listbox2_item2">item2</div>
  </div>

  <div role="grid" id="grid1">
    <div role="row">
      <span role="gridcell">cell</span>
      <span role="gridcell">cell</span>
    </div>
    <div role="row">
      <span role="gridcell">cell</span>
      <span role="gridcell">cell</span>
    </div>
  </div>

  <div role="tree" id="tree1">
    <div role="treeitem">
      item1
      <div role="group">
        <div role="treeitem">item1.1</div>
      </div>
    </div>
    <div>item2</div>
  </div>

  <div role="treegrid" id="treegrid1">
    <div role="row" aria-level="1">
      <span role="gridcell">cell</span>
      <span role="gridcell">cell</span>
    </div>
    <div role="row" aria-level="2">
      <span role="gridcell">cell</span>
      <span role="gridcell">cell</span>
    </div>
    <div role="row" aria-level="1">
      <span role="gridcell">cell</span>
      <span role="gridcell">cell</span>
    </div>
  </div>

  <table tabindex="0" border="2" cellspacing="0" id="grid2" role="grid"
         aria-multiselectable="true">
    <thead>
      <tr>
        <th tabindex="-1" role="columnheader" id="grid2_colhead1"
            style="width:6em">Entry #</th>
        <th tabindex="-1" role="columnheader" id="grid2_colhead2"
            style="width:10em">Date</th>
        <th tabindex="-1" role="columnheader" id="grid2_colhead3"
            style="width:20em">Expense</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td tabindex="-1" role="rowheader" id="grid2_rowhead"
            aria-readonly="true">1</td>
        <td tabindex="-1" role="gridcell" id="grid2_cell1"
            aria-selected="false">03/14/05</td>
        <td tabindex="-1" role="gridcell" id="grid2_cell2"
            aria-selected="false">Conference Fee</td>
      </tr>
    </tobdy>
  </table>
</body>
</html>
